<template>
  <div class="ly-content">
    <div class="ly-center">
      <div class="member-head" @click="inputClick">
        <div class="head" :style="{backgroundImage:'url('+userHead+')'}"></div>
        <input ref="file" type="file" style="display: none" accept="image/*" capture="camera"
               @change="inputOnChange($event)"/>
        <div class="tips">人脸注册</div>
      </div>
      <yd-cell-group>
        <yd-cell-item>
          <span slot="left">昵称&nbsp;</span>
          <input slot="right" v-model="member.userName" type="text" placeholder="请输入昵称">
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left">手机号&nbsp;</span>
          <input slot="right" v-model="member.cellPhone" type="number" placeholder="请输入手机号">
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left">身份证号&nbsp;</span>
          <input slot="right" v-model="member.idCard" type="text" placeholder="请输入身份证号">
        </yd-cell-item>
      </yd-cell-group>

      <yd-cell-group title="房间">
        <yd-cell-item type="checkbox" v-for="room in roomList" :key="room.id">
          <span slot="left">{{name}}{{room.roomInfo}}</span>
          <input slot="right" type="checkbox" :value="room.roomId" v-model="member.roomIds"/>
        </yd-cell-item>
      </yd-cell-group>


      <yd-button type="primary" class="ly-btn" size="large" @click.native="handleSubmit()">提交</yd-button>

    </div>

  </div>


</template>

<script>
  import http from "../../http";
  import storage from "../../store/storage.js";
  import Compressor from 'compressorjs';

  export default {

    data() {
      return {
        preview: 0,
        name: "",
        roomList: [],
        member: {
          roomIds: [],
        },
        faceId:'',
        userHead: '',
        housingId: '',
      }
    },
    created: function () {
      this.init();
    },
    mounted: function () {
    },
    methods: {
      init: function () {
        this.name = storage.getObj("housingId").name;
        this.housingId = storage.getObj("housingId").id;
        http.get("/communityApps/personalCenter/rooms?housingId=" + this.housingId + '&status=1').then(res => {
          if (res.data.code == 20000) {
            this.roomList = res.data.data;
          } else {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1500
            });
          }
        });
      },

      inputClick: function () {
        this.$refs.file.click();

      },
      inputOnChange: function (e) {

        const file = e.target.files[0];
        if (!file) {
          return;
        }
        this.$dialog.loading.open('图片上传中...');
        new Compressor(file, {
          quality: 0.5,
          success: (result) => {
            this.$dialog.loading.close();
            const formData = new FormData();
            formData.append('file', result, result.name);
            formData.append('housingId', storage.getObj("housingId").id);
            http.postFile("/communityApps/personalCenter/member/face", formData).then(res => {
              if (res.data.code == 20000) {
                this.userHead = res.data.data.imgUrl + '?r='+Math.random();
                this.faceId = res.data.data.faceId;
                this.$dialog.toast({
                  mes: "人脸上传成功！",
                  timeout: 500,
                });
              } else {
                this.$dialog.toast({
                  mes: res.data.message,
                  timeout: 1500
                });
                this.userHead = "";
              }
            });

          },
          error(err) {
            console.log(err.message);
          },
        });

      },


      handleSubmit: function () {

        const body = {
          userName: this.member.userName,
          cellPhone: this.member.cellPhone,
          idCard: this.member.idCard,
          roomIds: this.member.roomIds,
          faceImgUrl: this.userHead,
        }

        if (this.member.userName == "") {
          this.$dialog.toast({
            mes: "请先填写昵称",
            timeout: 1500
          });
        } else {
          console.log(body);

          http.post("/communityApps/personalCenter/member", body).then(res => {
            if (res.data.code == 20000) {
              this.$dialog.toast({
                mes: "添加成功！",
                timeout: 500,
                callback: () => {
                  this.$router.push("/user/memberList");
                }
              });
            } else {
              this.$dialog.toast({
                mes: res.data.message,
                timeout: 1500
              });
            }
          });
        }
      },

    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .member-head {
    width: 100%;
    height: 3.8rem;
    background: #fff url(../../assets/upload.png) no-repeat center;
    -webkit-background-size: 1.5rem;
    background-size: 1.5rem;
    border-bottom: 1px solid #eee;
    .head {
      width: 2.2rem;
      height: 2.2rem;
      margin: 0 auto;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      border-radius: 99%;
      position: relative;
      top: 0.8rem;
    }
    .tips {
      text-align: center;
      color: #666;
      margin-top: 0.8rem;
    }
  }

  .ly-btn {
    width: 86%;
    margin: 0.5rem auto 0;
  }
</style>

